<template>
  <div>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="24" class="search-form">
        <el-form :inline="true" :model="formInline" size="mini">
          <el-form-item label="ID搜索:">
            <el-input class="ipt-width-150" v-model="formInline.account" placeholder="输入账号"></el-input>
          </el-form-item>
          <el-form-item label="用户名搜索:">
            <el-input class="ipt-width-150" v-model="formInline.name" placeholder="输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="性别选择:">
            <el-select class="ipt-width-150" v-model="formInline.accState" placeholder="选择状态">
              <el-option label="--请选择--" value="0"></el-option>
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchAccount">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAccount">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clearall">清空</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="user-list">
      <el-col :span="19">
        <el-table
          :header-cell-style="{'text-align':'center'}"
          :body-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          ref="multipleTable"
          border
          style="width: 100%"
        >
          <el-table-column type="selection" label="全选" width="55"></el-table-column>
          <el-table-column prop="id" label="编号" width="50"></el-table-column>
          <el-table-column prop="url" label="头像" width="70">
            <template scope="scope">
              <img :src="scope.row.url" alt style="width: 40px;height: 40px" />
            </template>
          </el-table-column>
          <el-table-column prop="account" label="帐号" width="160"></el-table-column>
          <el-table-column prop="username" label="用户姓名" width="120"></el-table-column>
          <el-table-column prop="sex" label="性别" width="80"></el-table-column>
          <el-table-column prop="city" label="所在机构" width="120"></el-table-column>
          <el-table-column prop="endDate" label="所在部门" width="150"></el-table-column>
          <el-table-column prop="regDate" label="角色" width="180"></el-table-column>
          <el-table-column prop="sf" label="职称" width="120"></el-table-column>
          <el-table-column prop="accState" label="账号状态" width="120"></el-table-column>
          <el-table-column fixed="right" label="操作" width="248">
            <template slot-scope="scope">
              <el-button @click="look(scope.row)" type="text" size="small">权限分配</el-button>
              <el-button @click="write(scope.row)" type="text" size="small">角色修改</el-button>
              <el-button @click="deleteitem(scope.row)" type="text" size="small">角色删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row class="user-list" type="flex" justify="center" style="text-align: center">
      <el-col :span="24">
        <el-pagination
          @current-change="handleCurrentChange"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        ></el-pagination>
      </el-col>
    </el-row>

    <el-dialog title :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="div1">权限管理</div>
      <div class="divdiv">
        <span class="divdiv1">姓名：{{index.username}}</span>
        <span>编号：{{index.account}}</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-form :model="form">
          <el-form-item class="div4" label="选择角色：">
            <el-select class="div3" v-model="form.region" placeholder="请选择角色">
              <el-option label="普通会员" value="shanghai"></el-option>
              <el-option label="高级会员" value="beijing"></el-option>
              <el-option label="钻石会员" value="diamod"></el-option>
            </el-select>
          </el-form-item>
          <div class="div2">权限</div>
          <div class="div7">系统设置：</div>
          <el-form-item label>
            <el-checkbox-group class="div5" v-model="form.type">
              <el-checkbox label="系统配置" name="type1"></el-checkbox>
              <el-checkbox label="登录日志" name="type2"></el-checkbox>
              <el-checkbox label="操作日志" name="type3"></el-checkbox>
              <el-checkbox label="角色管理" name="type4"></el-checkbox>
              <el-checkbox label="权限分配" name="type5"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div class="div6">我的桌面</div>
          <el-form-item label>
            <el-checkbox-group class="div5" v-model="form.type">
              <el-checkbox label="最新通告" name="type1"></el-checkbox>
              <el-checkbox label="待处理任务" name="type2"></el-checkbox>
              <el-checkbox label="工作安排与提醒" name="type3"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- <el-button type="primary" round>保存</el-button> -->
        </el-form>
        <div class="divd">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
      <span class="modify">用户名: {{value.username}}</span>
      <span>ID:{{value.account}}</span>
      <el-form :model="form">
        <el-form-item label="用户名:" class="width" :label-width="formLabelWidth">
          <el-input v-model="form.name" placeholder="请输入用户名" ref="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别:" class="width" :label-width="formLabelWidth">
          <el-input v-model="form.sex" ref="sex" placeholder="请输入性别" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="机构:" class="width" :label-width="formLabelWidth">
          <el-input v-model="form.city" ref="city" placeholder="请输入所在机构" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门:" class="width" :label-width="formLabelWidth">
          <el-input v-model="form.endDate" placeholder="请输入所在部门" ref="endDate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色:" class="width" :label-width="formLabelWidth">
          <el-input v-model="form.regDate" placeholder="请输入角色" ref="regDate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职称:" class="width" :label-width="formLabelWidth">
          <el-input v-model="form.sf" ref="sf" placeholder="请输入职称" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer footer1">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmed()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let that = this;
export default {
  name: "accountManagement",
  data() {
    return {
      formInline: { account: "", sf: "不限", name: "", accState: "不限" },
      tableData: [
        {
          id: 1,
          account: "17786479680",
          sf: "雇主",
          username: "张三",
          sex: "男",
          city: "深圳",
          endDate: "教务处",
          regDate: "普通会员",
          accState: "正常",
          url: require("./assets/logo.png"),
        },
        {
          id: 2,
          account: "17786479680",
          sf: "雇主",
          username: "李四",
          sex: "男",
          city: "深圳",
          endDate: "教务处",
          regDate: "普通会员",
          accState: "正常",
          url: require("./assets/logo.png"),
        },
        {
          id: 3,
          account: "17786479680",
          sf: "雇主",
          username: "赵二",
          sex: "男",
          city: "深圳",
          endDate: "教务处",
          regDate: "普通会员",
          accState: "正常",
          url: require("./assets/logo.png"),
        },
        {
          id: 4,
          account: "17786479680",
          sf: "雇主",
          username: "王麻子",
          sex: "男",
          city: "深圳",
          endDate: "教务处",
          regDate: "普通会员",
          accState: "正常",
          url: require("./assets/logo.png"),
        },
        {
          id: 5,
          account: "17786479680",
          sf: "雇主",
          username: "王五",
          sex: "男",
          city: "深圳",
          endDate: "教务处",
          regDate: "普通会员",
          accState: "正常",
          url: require("./assets/logo.png"),
        },
      ],
      currentPage: 1,
      pageSize: 4,
      dialogVisible: false,
      index: 0,
      data: [{ endDate: "2017-11-16" }],
      dialogFormVisible: false,
      form: {
        name: "",
        sex: "",
        city: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        endDate: "",
        regDate: "",
        sf: "",
      },
      formLabelWidth: "60px",
      value: "",
    };
  },
  methods: {
    clearall() {
      this.formInline.account = "";
      this.formInline.name = "";
      this.formInline.accState = "不限";
    },
    deleteitem(e) {
      let that = this.tableData;
      let arr = [];
      console.log(e.id - 1);
      for (let i = 0; i < that.length; i++) {
        if (that[i].id != e.id) {
          arr.push(that[i]);
        }
      }
      this.tableData = arr;
      // console.log(that.splice(e.id-1,1))
    },
    contact: function () {
      let url = `/api/order/test`;
      let data = { id: 2 };
      this.$axios.post(url, data).then((data) => {
        console.log(data);
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    look(row) {
      this.dialogVisible = true;
      this.index = row;
      console.log(this);
    },
    write(row) {
      this.dialogFormVisible = true;
      this.value = row;
      console.log(this.value);
    },
    confirmed() {
      // console.log(this.value)
      this.value.name = this.$refs.name.value;
      this.value.sex = this.$refs.sex.value;
      this.value.city = this.$refs.city.value;
      this.value.endDate = this.$refs.endDate.value;
      this.value.regDate = this.$refs.regDate.value;
      this.value.sf = this.$refs.sf.value;
      console.log(this.tableData[this.value.id - 1].username);
      // this.value.sex = this.$refs.name.value;
      // this.value.city = this.$refs.name.value;
      this.dialogFormVisible = false;
      this.tableData[this.value.id - 1].username = this.value.name;
      this.tableData[this.value.id - 1].sex = this.value.sex;
      this.tableData[this.value.id - 1].city = this.value.city;
      this.tableData[this.value.id - 1].endDate = this.value.endDate;
      this.tableData[this.value.id - 1].regDate = this.value.regDate;
      this.tableData[this.value.id - 1].sf = this.value.sf;
    },
    //搜索帐号
    searchAccount() {
      let that = this;
      let url = "/api/user/search";
      let params = that.formInline;

      that.$axios
        .get(url, { params: params })
        .then((result) => {
          // console.log(result)  //axios响应对象，就包括了config,data,...
          // console.log(result.data) // 后台res.json()返回的对象；
          // console.log(result.data.data) // 包括后台res.json()返回的对象中查询的结果对应的数据（数组）；
          if (result.data.status === 200) {
            that.$message({
              message: "查询成功",
              type: "success",
            });
            that.tableData = result.data.data;
          } else {
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //    添加账号
    addAccount() {
      this.$router.push({ path: "/main/addAccount" });
    },
    handleClick(row, column, index) {
      // console.log(row);
      // console.log(column);
      // console.log(index);
    },
    show() {
      console.log(1);
    },
  },
};
</script>

<style scoped lang="less">
.divdiv1{
  margin-right: 5%;
}
.divdiv{
  margin-top: 1%;
  margin-bottom: -2%;
}
.div1 {
  color: black;
  font-weight: 600;
  font-size: 20px;
  margin-top: -5%;
}
.divd {
  width: 100%;
  display: flex;
  justify-content: center;
}
.div7 {
  margin-top: 3%;
  display: flex;
  width: 30%;
  padding-bottom: 10px;
  border-bottom: 3px solid black;
}
.div6 {
  display: flex;
  width: 30%;
  padding-bottom: 10px;
  border-bottom: 3px solid black;
}
.div5 {
  display: flex;
  flex-wrap: wrap;
}
.div4 {
  display: flex;
}
.div3 {
  border-radius: 6px;
  border: 1px solid black;
  margin-left: 0px;
}
.div2 {
  text-align: left;
  border-bottom: 1px solid black;
  padding-bottom: 5px;
}
.modify {
  margin-left: 20%;
  margin-right: 3%;
  margin-bottom: 2%;
}
.footer1 {
  margin: 0px auto;
  // border: 1px solid red;
  width: 24%;
}
.width:nth-of-type(1) {
  margin-top: 50px;
}
.width {
  margin: 0px auto;
  margin-bottom: 3%;
  width: 60%;
}
.search-form {
  border: 1px solid #e4e4e4;
  padding: 20px 20px 0;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}

.ipt-width-150 {
  width: 150px !important;
}

.user-list {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e4e4e4;
  box-shadow: 0 0 3px 1px #e4e4e4;
  border-radius: 3px;
}

.btn-group {
  margin-top: 20px;
}
</style>